<template>
	<div id="loginAll">
		<div id="left">
			<img src="../static/wenxuange.png" @click="toIndex" />
		</div>
		<div id="center">
			<div id="centerImg">
				<div id="imgGroup" ref="imgGroup">
					<div class="imgOut"><img src="../static/sights/4.png" /></div>
					<div class="imgOut"><img src="../static/sights/1.png" /></div>
					<div class="imgOut"><img src="../static/sights/2.png" /></div>
					<div class="imgOut"><img src="../static/sights/3.png" /></div>
					<div class="imgOut"><img src="../static/sights/4.png" /></div>
				</div>
			</div>
			<div id="loginBox">
				<div id="logoImg">
					<img src="../static/logo.png" />
				</div>
				<div id="top">
					<div :class="type=='login'?'topContext boxBottom':'topContext'" @click="change('login')">登录</div>
					<div id="dian">·</div>
					<div :class="type=='sign'?'topContext boxBottom':'topContext'" @click="change('sign')">注册</div>
				</div>
				<div id="context">
					<div v-if="type == 'login'">
						<div class="loginInput">
							<img src="../static/user.png" />
							<input type="text" placeholder="用户名或邮箱" v-model="loginInfo.data" />
						</div>
						<div class="loginInput">
							<img src="../static/mima.png" />
							<input type="password" placeholder="密码" v-model="loginInfo.pwd" />
						</div>
					</div>
					<div v-else>
						<div class="loginInput">
							<img src="../static/user.png" />
							<input type="text" placeholder="用户名" v-model="signInfo.name" />
						</div>
						<div class="loginInput">
							<img style="width: 24px; padding: 0 13px;" src="../static/youxiang.png" />
							<input type="text" placeholder="邮箱" v-model="signInfo.email" />
						</div>
						<div class="loginInput">
							<img src="../static/mima.png" />
							<input type="password" placeholder="密码" v-model="signInfo.pwd" />
						</div>
					</div>
				</div>
				<div id="sendBtn">
					<div class="loginBtn" v-if="type == 'login'" @click="login">登录</div>
					<div class="loginBtn" v-else @click="sign">注册</div>
				</div>
			</div>
		</div>
		<div id="right"></div>
	</div>
</template>

<script>
	import storage from '../utils/storage.js'
	export default {
		data() {
			return {
				page: 1,
				type: '',
				signInfo: {
					name: '',
					email: '',
					pwd: ''
				},
				loginInfo: {
					data: '',
					pwd: ''
				}
			}
		},
		mounted() {
			this.type = this.getQueryString('type')
			this.$refs.imgGroup.style.top = "-560px"
			let imgMove = setInterval(this.nextImg, 3000)
			imgMove
			this.$refs.imgGroup.addEventListener("transitionend", () => {
				if (this.page == 4) {
					this.backImg()
				}
			})
			this.$refs.imgGroup.onmouseover = () => {
				clearInterval(imgMove)
			}
			this.$refs.imgGroup.onmouseout = () => {
				imgMove = setInterval(this.nextImg, 3000)
			}
		},
		methods: {
			nextImg() {
				this.$refs.imgGroup.style.transition = "all .5s"
				let temp = parseInt(this.$refs.imgGroup.style.top)
				this.$refs.imgGroup.style.top = temp - 560 + "px"
				this.page++
			},
			backImg() {
				this.$refs.imgGroup.style.transition = "none"
				this.$refs.imgGroup.style.top = 0 + "px"
				this.page = 0
			},
			change(e) {
				this.type = e
			},
			sign() {
				this.$axios({
					url: this.ip + '/sign',
					method: 'post',
					data: this.signInfo
				}).then(res => {
					console.log(res.data)
					this.toIndex()
				})
			},
			login() {
				this.$axios({
					url: this.ip + '/login',
					method: 'post',
					data: this.loginInfo
				}).then(res => {
					console.log(res.data)
					storage.set('user',res.data.back)
					console.log(storage.get('user'))
					this.toIndex()
				})
			},
			toIndex(){
				location.assign(`http://${location.host}/index`)
			}
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	#loginAll {
		background-color: #f6f6f6;
		height: calc(100vh - 64px);
		width: 100%;
		padding: 32px 0;
		display: flex;
		flex-direction: row;
	}

	#loginAll #left {
		height: 100%;
		flex: 1;
	}
	
	#loginAll #left img {
		cursor: pointer;
	}

	#loginAll #center {
		height: 100%;
		flex: 4;
	}

	#loginAll #right {
		height: 100%;
		flex: 1;
	}

	#loginAll #left img {
		width: 100%;
	}

	#loginAll #center {
		display: flex;
		justify-content: center;
	}

	#loginAll #center #centerImg {
		width: 300px;
		height: 560px;
		box-shadow: 0px 0px 8px rgba(32, 32, 32, .3);
		align-items: center;
		margin-right: 32px;
		position: relative;
		overflow: hidden;
	}

	#loginAll #center #centerImg #imgGroup {
		position: absolute;
	}

	#loginAll #center #centerImg #imgGroup .imgOut {
		padding: 130px 0;
		background-color: #eeebe6;
	}

	#loginAll #center #centerImg #imgGroup .imgOut img {
		width: 100%;
		display: block;
	}

	#loginAll #center #loginBox {
		width: 300px;
		height: 480px;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 8px rgba(32, 32, 32, .3);
		border-radius: 8px;
		padding: 40px 50px;
	}

	#loginAll #center #loginBox #logoImg,
	#loginAll #center #loginBox #logoImg img {
		width: 50px;
		height: 50px;
		margin: auto;
	}

	#loginAll #center #loginBox #top {
		width: 100%;
		height: 40px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 16px 0;
	}

	#loginAll #center #loginBox #top #dian {
		padding: 0 10px;
		height: 40px;
		line-height: 40px;
		font-size: 18px;
	}

	#loginAll #center #loginBox #top .topContext {
		color: black;
		text-decoration: none;
		width: 56px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		font-size: 18px;
		cursor: pointer;
		user-select: none;
	}

	#loginAll #center #loginBox #top .boxBottom {
		color: #996699;
		font-weight: bold;
		border-bottom: 2px solid #996699;
	}

	#loginAll #center #loginBox #top .topContext:active {
		color: #996699;
	}

	#loginAll #center #loginBox #context {
		margin-top: 32px;
		height: 250px;
	}

	#loginAll #center #loginBox #context .loginInput {
		margin-top: 16px;
		display: flex;
		flex-direction: row;
		height: 50px;
		width: 100%;
		align-items: center;
	}

	#loginAll #center #loginBox #context .loginInput img {
		display: block;
		padding: 0 15px;
		width: 20px;
		height: 20px;
	}

	#loginAll #center #loginBox #context .loginInput input {
		width: 180px;
		height: 38px;
		line-height: 38px;
		padding: 0 20px;
		border: none;
		border: 1px #CCCCFF solid;
		border-radius: 20px;
		font-size: 16px;
		transition: all .3s;
	}

	#loginAll #center #loginBox #context .loginInput input:focus {
		outline: none;
		box-shadow: 0 0px 16px 8px rgba(204, 204, 255, .5);
	}

	#loginAll #center #loginBox #sendBtn .loginBtn {
		width: 100%;
		height: 48%;
		text-align: center;
		line-height: 48px;
		background-color: #996699;
		border-radius: 24px;
		font-size: 18px;
		font-weight: bold;
		color: #FFFFFF;
	}
	#loginAll #center #loginBox #sendBtn .loginBtn:hover {
		cursor: pointer;
		user-select: none;
	}
</style>
